ساخت نقشه تصویری ( image map )   

ساخت نقشه تصویری     ( image map )

      Image map     یکی از تکنیکهای ساخت عکس بصورت لینک است که گاهی اوقات به کمک ما میاید. بطور مثال ما نقشه ایران را در صفحه ای قرارداده و میخواهیم که بیننده سایت هرگاه روی یک استان کلیک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختیار کاربر قرار دهد.  این حالت حجم عکس را افزایش نخواهد داد و بهتر است از عکسهایی با حجم بالا استفاده نکنیم که در این مورد به قسمت عکسها رجوع کنید.

خب حالا عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهید،  سپس خصوصیت usemap=" "  را به تگ  اضافه کنید که آنرا برابربا یک اسم واحد باید قرار دهیم تا از آن اسم در جای دیگر استفاده شود. این خصوصیت به مرورگر میفهماند که عکس را بصورت Image map  میخواهیم بکار بریم.

<img src="images/mypic.gif" usemap="#map01">

به علامت # دقت کنید که باید نوشته شود. در حال حاضر عکس آماده است و باید تگهای نقشه را وارد کنیم.ابتدا تگ <map name="map01">  وارد میکنیم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصیتname=" "   مشخص میشود که چه عکسی قرار است این خاصیت را داشته باشد. حالا نوبت به تعیین قسمتهای مختلف عکس رسیده که هر قسمت در چه اندازه ای و به کجا باید لینک شود. این قسمتها میتوانند اشکال هندسی نظیردایره، چهارگوش وچند ضلعی باشند. این اطلاعات در تگ <area> مشخص میشوند، این تگ دارای سه خصوصیت میباشد:

  Shape=" "  مشخص میکند که هر قسمت دارای چه شکل هندسی میباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect"  قرار میدهیم، اگر دایره circle بخواهیم برابر با "circle" و اگر چند ضلعی polygon بخواهیم برابر با "poly"   قرار میدهیم.

  Coords=" "این خصوصیت، مختصات نقاط تشکیل دهنده  شکلها را مشخص میکند که مختصات هر نقطه بر اساس محور x, y  در مقیاس پیکسل میباشد. برای تشکیل یک لینک به شکل چهارگوش باید مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پایین آنرا بدست بیاوریم ، چون هر نقطه دارای دو مختصات میباشد یکی بر روی محور xها و دیگری yها پس چهار عدد باید بنویسیم و هر عدد را با علامت کاما جدا کنیم.

Coords="10,10,65,65"

همچنین برای درست کردن یک لینک به شکل دایره مختصات مرکز آن و اندازه طول شعاع را باید پیدا کنیم که با توجه به گفته بالا سه عدد باید نوشته شود و برای چند ضلعی به تعداد هر نقطه دو عدد مینویسیم که دیگر محدودیت ندارد.

href=" " که در این قسمت آدرس صفحه یا سایت مورد نظر را وارد میکنیم.

<img src="images/mypic.gif" usemap="#map01">
<map name="map01">
<area shape="rect" coords="25,25,55,50"  href="page.htm">
<area shape="circle" coords="124,243,40"  href= "www.yahoo.com">
<area shape="poly"  coords="22,30,76,90,147,199,289,270,140,111,44,67"  href="pages/first.html">
</map>

 خب سوالی که حالا پیش میاید، اینست که مختصات این نقاط را چگونه پیدا کنیم؟ دو راه برای آن وجود دارد، یکی استفاده از برنامه های مختلف مانند Photoshop و دیگری که برایتان توضیح خواهم داد بدون استفاده از برنامه جانبی است و داخل همان صفحه ، با کمک مرورگر اینترنت اکسپلورراست. بعد از اینکه یک عکس را در صفحه قرار دادیم و مراحل تشکیل Image map  را انجام دادیم یک تگ و یک خصوصیت به این کدها اضافه میکنیم و آنچه را که میخواهیم براحتی بدست میاوریم. ابتدا تگ مخصوص لینک را قبل از<img> قرار میدهیم تا عکس ما بصورت یک لینک ظاهر شود و سپس خصوصیت ismap را به تگ<img>اضافه میکنیم و فایل را ذخیره میکنیم. حالا آنرا باز کرده و همانطور که موس را روی عکس حرکت میدهید یک نگاه به نوار وضعیت status bar  مرورگر در پایین بیاندازید، اعدادی را که مشاهده میکنید مختصات نقاط میباشند.

<a href=" # "><img src="image.gif" usemap="#newmap"  ismap>
<map name="newmap">
</map>
</a>

فراموش نکنید که بعد از پیدا کردن مختصات نقاط، تمام مراحلی را که اضافه کردید دوباره بردارید.